<template>
<rs-split class="rs-dict" type="vertical" :minSize="530" fixed @resize="onResize" >
    <div class="rs-dict-type" slot="first">
        <div class="rs-toolbar">
            <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="onAddDict">新增</el-button>
            <el-input v-model="dictQuery.zdmc" type="text" clearable placeholder="请输入字典编号或名称..." size="small" style="width:200px;vertical-align: middle;"></el-input>
            <el-button-group>
                <el-button type="success" size="small" icon="el-icon-circle-close" @click="onQueryDict">查询</el-button>
                <el-button type="danger" size="small" icon="el-icon-circle-close" @click="onClearQueryDict">清空</el-button>
            </el-button-group>
        </div>
        <el-table
            ref="tableDict"
            :max-height="tableHeight"
            :height="tableHeight"
            :data="dicts"
            border
            size="small"
            highlight-current-row
            style="width: 100%"
            @row-click="onDictRowClick"
            >
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="zdbh" label="字典编号" width="100"></el-table-column>
                <el-table-column prop="zdmc" label="字典名称" width="200"></el-table-column>
                <el-table-column prop="zdjg" label="支持层级" width="80" :formatter="zdjgFormater"></el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    minWidth="70">
                    <template slot-scope="scope">
                        <el-button class="rs-table-btn" @click="onEditDict(scope.row)" type="text" size="mini">编辑</el-button>
                        <el-button class="rs-table-btn" @click="onDeleteDict(scope.row)" type="text" size="mini">删除</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <RsPagination :currentPage="dictQuery.page" :pageSize="dictQuery.pageSize" :totalCount="dictCount" @change="onDictPageChange"></RsPagination>
        <DictForm ref="dictForm"></DictForm>
    </div>
    <div class="rs-dict-info" slot="last">
        <div class="rs-toolbar">
            <el-button-group>
                <el-button type="primary" size="small" icon="el-icon-circle-plus" @click="onAddInfo" :disabled="disabledAddInfo">新增</el-button>
            </el-button-group>
        </div>
        <el-table
            ref="tableDetails"
            :max-height="tableHeight"
            :height="tableHeight"
            :data="details"
            border
            size="small"
            highlight-current-row
            style="width: 100%"
            >
                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                <el-table-column prop="tmbh" label="字典条目值" width="100"></el-table-column>
                <el-table-column prop="tmmc" label="字典条目名称" width="200"></el-table-column>
                <el-table-column prop="tmxh" label="排序号" width="65"></el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    minWidth="80">
                    <template slot-scope="scope">
                        <el-button class="rs-table-btn" @click="onEditInfo(scope.row)" type="text" size="mini">编辑</el-button>
                        <el-button class="rs-table-btn" @click="onDeleteInfo(scope.row)" type="text" size="mini">删除</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <RsPagination :currentPage="infoQuery.page" :pageSize="infoQuery.pageSize" :totalCount="infoCount" @change="onInfoPageChange"></RsPagination>
        <InfoForm ref="infoForm"></InfoForm>
    </div>
</rs-split>
</template>
<script>
import tips from '../../mixin/tips';
import dict from './dict.js';
import info from './info.js';
import DictForm from './dictForm';
import InfoForm from './infoForm';
export default {
    name:'DictPage',
    mixins:[tips,dict,info],
    components:{DictForm,InfoForm},
    data(){
        return {
            tableHeight:0,
            dictRow:null
        }
    },
    computed:{
        disabledAddInfo(){
            return !this.dictRow;
        }
    },
    methods:{
        onResize(obj){
            this.tableHeight = obj.first.height - 65;
        },
        onDictRowClick(row){
            //console.log(row);
            this.dictRow = row;
            this.loadInfo();
        }
    }
}
</script>